<template>
  <view class="liveBroadcastBox" :style="{ height: screenHeight - 122 + 'px',width:windowWidth+ 'px' }">
    <image src="@/static/image/zhiboBG.png"  class="image" :style="{ height: screenHeight - 122 + 'px',width:windowWidth+ 'px' }" >
    <view class="liveBroadcast" :style="{ height: screenHeight - 122 + 'px',width:windowWidth+ 'px' }">
      <swiper
        class="swiper"
        circular
        indicator-active-color="#fff"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :style="{ width: width - 30 + 'px' }"
      >
        <swiper-item
          v-for="item in swiperItem"
          :key="item.FilePath"
          @click="liveDetail(item)"
        >
          <view class="swiper-item">
            <image :src="urls + item.FilePath" class="image" />
          </view>
        </swiper-item>
      </swiper>
      <view class="navbs">
        <!-- 	<view class="navb" :class="{'navxuan':nav===0?false:true}" @click="nav=0">
				<text>回放</text>
			</view> -->
        <view
          class="navb"
          :class="{ navxuan: nav === 1 ? false : true }"
          @click="nav = 1"
        >
          <text class="text">直播列表</text>
        </view>
      </view>
      <view class="lists">
        <tps
          :information="item"
          v-for="(item, index) in list"
          :key="index"
          style="margin-top: 30rpx"
          @navtab="navtab"
        >
        </tps>
        <view class="gengduo">
          <text class="text">{{
            Total > list.length ? "加载更多..." : "没有更多了"
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
import tps from "@/pages/component/home-page/liveBroadcast/tp.vue";
import $http from "@/common/api/api.js";
import $config from "@/common/api/config.js";
export default {
  props: {
    screenHeight: {
      type: Number,
      default: 500,
    },
    windowWidth: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      width: 99,
      indicatorDots: true, //是否显示面板指示点
      autoplay: true, //是否自动切换
      interval: 5000, //自动切换时间间隔
      duration: 500, //滑动动画时长
      nav: 1, //
      PageIndex: 1,
      PageSize: 10,
      Total: 0,
      list: [],
      swiperItem: [], //轮播图
      urls: "",
    };
  },
  methods: {
    ...mapMutations(["setLiveMessage"]),
    //广告
    coreadlist() {
      $http.live
        .coreadlist({
          PositionId: 416219996655749,
        })
        .then((res) => {
          if (res.Success) {
            this.swiperItem = res.Result;
          }
        });
    },
    //直播预告
    LiveReservationList() {
      $http.live
        .LiveReservationList({
          StateList: [0, 1],
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
        })
        .then((res) => {
          if (res.Success) {
            this.Total = res.Result.Total;
            this.list = [...this.list, ...res.Result.Items];
          }
        });
    },
    navtab(item) {
      this.setLiveMessage(item);
      uni.navigateTo({
        url: "/pages/views/packageA/type-jobhunting/LiveV/index?Id=" + item.Id,
      });
    },
    liveDetail(item) {
      $http.live
        .liveDetail({
          Id: item.LinkUrl,
        })
        .then((res) => {
          if (res.Success) {
            this.navtab(res.Result);
          }
        });
    },
  },
  // 上拉加载
  onReachBottom() {
    if (this.Total > this.list.length) {
      this.PageIndex++;
      if (this.nav == 1) {
        this.LiveReservationList();
      }
    }
  },
  watch: {
    nav: {
      handler(val) {
        if (val === 1) {
          this.PageIndex = 1;
          this.list = [];
          this.LiveReservationList();
        } else {
          this.PageIndex = 1;
          this.list = [];
        }
      },
      immediate: true,
    },
  },
  components: {
    tps,
  },
  created() {
    const app = getApp();
    this.width = app.globalData.phoneInformation.windowWidth;
    this.urls = $config.domain.staticUrl;
    this.coreadlist();
  },
};
</script>

<style lang="scss" scoped>
.liveBroadcastBox {
  position: relative;
  .image {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
  }
  .liveBroadcast {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 39999;
    // background-color: black;
    padding: 10upx 30upx 0upx;
    overflow: scroll;
    // background-image: url("../../../../static/image/zhiboBG.png");
    // background-repeat: no-repeat;
    // background-size: 100%;

    .swiper {
      border-radius: 16rpx;
      display: flex;
      flex-direction: row;
      height: 400rpx;

      .swiper-item,
      .image {
        flex: 1;
        border-radius: 16rpx;
      }
    }

    .navbs {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-start;

      .navb {
        color: #fff;
        margin-right: 20rpx;

        .text {
          color: #fff;
        }
      }

      .navxuan {
        color: rgba(255, 255, 255, 0.5) !important;
      }
    }

    .lists {
      display: flex;
      flex-direction: column;
      flex: 1;
      border-radius: 16rpx;
      margin-bottom: 100rpx;
      overflow: scroll;
      .gengduo {
        margin-top: 30rpx;
        font-size: 24rpx;
        display: flex;
        // background-color: blue;
        // align-items: center;

        .text {
          color: #fff;
          font-size: 24rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>